<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>图书管理</h1>
    <ul>

    </ul>
    <form action="">
        书名：<input type="text" name="bookname"><br />
        作者：<input type="text" name="author"><br />
        出版社<input type="text" name="publisher"><br />
        <button id="add">添加</button>
    </form>

    <script src="./axios.js"></script>
    <script>
        // 1.获取图书
        async function books() {
            const { data: res } = await axios.get('http://localhost:3000/yoyo/GetBooks')
            console.log(res)
            let arr = res.data.map((item, index) => {
                return `<li>${index + 1} - ${item.bookname} - ${item.author} - ${item.publisher} - <button>删除</button></li>`
            })
            document.querySelector('ul').innerHTML = arr.join('')
        }
        books()

        // 2.添加图书
        document.querySelector('#add').addEventListener('click', async function (e) {
            e.preventDefault()
            
            let bookname = document.querySelector('[name=bookname]').value
            let author = document.querySelector('[name=author]').value
            let publisher = document.querySelector('[name=publisher]').value
            
            const { data: res } = await axios.post('http://localhost:3000/yoyo/AddBooks', {
                bookname, author, publisher
            })
            books() 
        })
    </script>
</body>

</html>